<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>jQuery导航条滑块-jQuery在线演示-jQuery学习</title>
    <meta name="keywords" content="jQuery滑块,jQuery导航条滑块跟随,jQuery滑动式动画导航栏"/>
    <meta name="description" content="在线演示jQuery导航条滑块跟随效果，jQuery鼠标经过背景跟随滑动的导航菜单是一款基于jquery实现的类似动画效果的网站导航菜单特效。应用简单，注意css的写法！已兼容ie6+  有问题就是样式问题了！"/>
    <link href="http://www.jquery001.com/css/site.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        *{margin:0;padding:0;list-style:none;}
        a{color:#ddd;text-decoration:none;}
        a:hover{color:#ff0000;}
        .Nav{width:100%;font-size:0;line-height:0;padding-top:11px;position:relative;padding-bottom:10px;}
        .Nav li{display:inline-block;*display:inline;*zoom:1;_display:inline;_zoom:1;padding-right:29px !important;}
        .Nav li a{font-size:14px;line-height:28px;color:#666;}
        .Nav li a:hover,.Nav li.active a,.Nav li a.active{color:#ff0066;}
        .Nav .hkDiv{height:3px;background:#E6E6E6;margin-top:4px;position:relative;}
        .Nav .hkDiv span{display:block;height:3px;position:absolute;bottom:0;background:#FF0066;}
        .Nav .hkDiv2{height:28px;position:absolute;top:8px;width:100%;background:none;z-index:-1;}
        .Nav .hkDiv2 span{height:28px;z-index:-1;top:0;background:#ddd;border-radius:5px;}
        .Nav2 li{padding-right:18px;}
        .Nav2 li a{padding:0 5px;}
    </style>
</head>
<body>
    <div id="page-wrap">
        
        <div id="content-wrap">     
            <div id="demo-left" class="demo">
                <h1>jQuery导航条滑块</h1>
                <p>jQuery鼠标经过背景跟随滑动的导航菜单是一款基于jquery实现的类似动画效果的网站导航菜单特效。应用简单，注意css的写法！已兼容ie6+  有问题就是样式问题了！详细使用方法可见<a href="http://www.jquery001.com/jquery-navigation-slider.html">jquery导航条滑块</a></p>
                <div class="box">
                    <div id="myNavbar" class="Nav">
                        <ul>
                            <li><a href="#">首页</a></li>
                            <li><a href="#">励志名言</a></li>
                            <li class="active"><a href="#">励志文章</a></li>
                            <li><a href="#">励志故事</a></li>
                            <li><a href="#">名人名言</a></li>
                            <li><a href="#">经典语录</a></li>
                            <li><a href="#">励志演讲</a></li>
                        </ul>
                        <div class="hkDiv"><span></span></div>
                    </div>
                    <div id="myNavbar2" class="Nav Nav2">
                        <ul>
                            <li class="active"><a href="#">首页</a></li>
                            <li><a href="#">励志名言</a></li>
                            <li><a href="#">励志文章</a></li>
                            <li><a href="#">励志故事</a></li>
                            <li><a href="#">名人名言</a></li>
                            <li><a href="#">经典语录</a></li>
                            <li><a href="#">励志演讲</a></li>
                        </ul>
                        <div class="hkDiv hkDiv2"><span></span></div>
                    </div>
                </div>
            </div>
           
        </div>
      
    </div>
    <script src="http://libs.baidu.com/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        /*插件*/
        $.fn.NavSlither = function () {
            var $_NavDiv = $(this),
        $_NavUl = $('ul', $_NavDiv),
        $_NavLi = $('li', $_NavUl),
        $_NavHua = $('.hkDiv', $_NavDiv),
        $_NavMHK = $('span', $_NavHua),
            //根据li的类名获取当前页面位置确定滑块的初始值
        dnum = $_NavLi.index($_NavDiv.find(' ul li.active')),
        $Ac_li = $_NavLi.eq(dnum),
        widthA = $Ac_li.width(),
        leftA = $Ac_li.position().left;
            //初始化滑块位置
            $_NavMHK.css({ width: widthA, left: leftA });
            //利用触发的li元素索引获取left位置和它的宽度
            $_NavLi.hover(function () {
                var index = $_NavLi.index(this),
            widthB = $_NavLi.eq(index).width(),
            leftB = $_NavLi.eq(index).position().left;
                $_NavMHK.stop().animate({ width: widthB, left: leftB }, 200);
            }, function () {
                //鼠标离开li元素时，动画滑块返回初始元素位置  
                $_NavMHK.stop().animate({ width: widthA, left: leftA }, 200);
            });
        }
        $(function () {
            $('#myNavbar').NavSlither();
            $('#myNavbar2').NavSlither();
        });
    </script>
	
</body>
</html>